<template>
  <div style="height: 100%;">
    <OptionTitle title="轮播图" />
    <el-form label-width="100" class="mt20">
      <el-form-item label="显示内容：" class="mb5">
        <el-checkbox-group v-model="showContent" @change="ruleClick">
          <el-checkbox v-for="item in paramList" :key="item.key" :label="item.key">{{ item.value }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- <el-form-item label="显示规则：" class="mb5">
        <el-radio v-for="item in ruleList" :key="item.key" v-model="venueContent.rule" :label="item.key" @change="ruleClick(item.key)">{{ item.value }}</el-radio>
      </el-form-item> -->
    </el-form>
    <!-- <div v-if="venueContent.rule === '2'" class="side">
      <el-button icon="el-icon-plus" @click="openDrawer">添加轮播图</el-button>
      <Draggable v-model="venueContent.customList" class="list" @end="dragSuccess">
        <div v-for="item,index in venueContent.customList" :key="item.id" class="item">
          <img class="img" :src="item.icon" alt="">
          <img class="drag" src="@/assets/icon/drag.png" alt="">
          <div class="del_wrap" @click="customItemDel(index)">
            <i color="#FDEBE8" class="el-icon-delete" />
          </div>
        </div>
      </Draggable>
    </div> -->

    <el-drawer
      title="新增轮播图"
      :visible.sync="isShowDrawer"
      size="50%"
    >
      <div class="drawer_wrap">
        <div>
          <span>标题：</span>
          <el-input v-model="searchSlideTitle" class="w200 mr20" placeholder="请输入标题搜索" />
          <el-button type="primary" @click="queryDrawerList">查找</el-button>
          <el-button @click="clearDrawer">清空</el-button>
        </div>
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="bannerList"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table mt20"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            align="center"
            width="55"
          />
          <el-table-column
            align="center"
            label="广告类型"
            prop=""
            min-width="100"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              {{ row.type == 1 ? '新人广告':'首页banner' }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="广告标题"
            prop="title"
            min-width="100"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="宣传图"
            prop=""
            width="100"
          >
            <template slot-scope="scope">
              <el-image
                fit="contain"
                :src="scope.row.imageFullPath"
                :preview-src-list="[scope.row.imageFullPath]"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="关联类型"
            prop="typeName"
            min-width="80"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="关联内容"
            prop="paramName"
            min-width="100"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="创建时间"
            prop="createTime"
            min-width="160"
            show-overflow-tooltip
          />
        </el-table>
        <Paginations
          :total="bannerListTotal"
          :page="pagination.page"
          @current-change="currentChange"
          @SizeChange="handleSizeChange"
        />
        <div class="drawer_bottom">
          <div class="separate" />
          <el-button
            v-preventReClick
            type="primary"
            class="ml20"
            @click="customSub"
          >提交</el-button>
          <el-button @click="isShowDrawer = false">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import OptionTitle from '../../../components/optionTitle.vue'

import { bannerList } from '@/api'
export default {
  components: {
    OptionTitle,
    Draggable
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      paramList: [],
      ruleList: [],
      content: {},
      venueContent: {},

      showContent: [], // 显示内容 暂存

      bannerList: [], // 添加banner
      bannerListTotal: 0,
      pagination: {
        page: 1,
        rows: 10
      },
      isShowDrawer: false,
      searchSlideTitle: '',
      selTableList: [],
      listLoading: false,

      contentTemp: {},
      venueContentTemp: {},
      showContentTemp: []
    }
  },
  created() {
    this.paramList = [...this.config.paramList]
    this.ruleList = [...this.config.ruleList]
    this.content = { ...this.config.content }
    this.venueContent = { ...this.config.venueContent }
    if (this.content.param) {
      this.showContent = this.content.param.split(',')
    }

    this.contentTemp = JSON.parse(JSON.stringify(this.config.content))
    this.venueContentTemp = JSON.parse(JSON.stringify(this.config.venueContent))
    if (this.content.param) {
      this.showContentTemp = JSON.parse(JSON.stringify(this.content.param.split(',')))
    }
  },
  methods: {
    dragSuccess() {
      const { showContent, showContentTemp, venueContent, venueContentTemp } = this
      let count = 0
      if (showContent.join(',') !== showContentTemp.join(',')) {
        count++
      }
      if (venueContent.rule !== venueContentTemp.rule) {
        count++
      }
      if (venueContent.customList && venueContentTemp.customList && venueContent.customList.map(i => i.id).join(',') !== venueContentTemp.customList.map(i => i.id).join(',')) {
        count++
      }
      this.$bus.$emit('miniBannerChange', this.venueContent.rule, this.venueContent.customList, this.showContent)
    },
    handleSelectionChange(val) {
      this.selTableList = val
    },
    indexSub() {
      const fn = () => {
        if (this.venueContent.rule === '1') {
          this.venueContent.customList = null
        }
      }
      fn()
    },
    ruleClick() {
      // if (this.venueContent.rule === '1') {
      //   this.venueContent.customList = null
      // }
      this.dragSuccess()
      // this.$bus.$emit('miniBannerChange', this.venueContent.rule, this.venueContent.customList, this.showContent)
    },
    openDrawer() {
      this.searchSlideTitle = ''
      this.selTableList = []
      this.pagination = {
        page: 1,
        rows: 10
      }
      this.getBannerList()
      this.isShowDrawer = true
      this.$nextTick(() => {
        this.$refs.table.clearSelection()
      })
    },
    customItemDel(index) {
      const temp = [...this.venueContent.customList]
      temp.splice(index, 1)
      this.venueContent.customList = temp
      this.dragSuccess()
    },
    customSub() {
      const temp = JSON.parse(JSON.stringify(this.venueContent.customList)) || []
      const customList = this.selTableList.map(item => {
        item.icon = item.imageFullPath
        // item.title = item.name || ''
        return item
      })
      customList.forEach(item => {
        if (temp.findIndex(i => i.id === item.id) > -1) {
          return
        } else {
          temp.push(item)
        }
      })
      if (temp.length > this.config.maxNum) {
        return this.$message.warning(`最多添加${this.config.maxNum}个轮播图`)
      }
      this.venueContent.customList = temp
      this.dragSuccess()
      this.$bus.$emit('miniBannerChange', '2', temp, this.showContent)
      this.isShowDrawer = false
    },
    getBannerList() {
      this.listLoading = true
      bannerList({
        param: {
          isAllow: '1',
          type: 0,
          title: this.searchSlideTitle,
          venueId: this.config.venueId
        },
        pagination: this.pagination
      }).then(res => {
        this.listLoading = false
        this.bannerList = res.recordList
        this.bannerListTotal = res.totalCount
      }, () => {
        this.listLoading = false
      })
    },
    clearDrawer() {
      this.searchSlideTitle = ''
      this.pagination.page = 1
      this.getBannerList()
    },
    queryDrawerList() {
      this.pagination.page = 1
      this.getBannerList()
    },
    currentChange(val) {
      this.pagination.page = val
      this.getBannerList()
    },
    handleSizeChange(val) {
      this.pagination.rows = val
      this.getBannerList()
    }
  }
}
</script>

<style lang="scss" scoped>
.side{
  .list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .item{
      margin-right: 20px;
      margin-bottom: 20px;
      width: 174px;
      height: 76px;
      position: relative;
      border: 1px solid #DFE2E8;
      cursor: pointer;
      &:hover{
        .del_wrap{
          display: block;
        }
      }
      .del_wrap{
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius:  0 0 0 4px;
        text-align: center;
        background-color: #FDEBE8;
        color: #EE3821;
        font-size: 12px;
        cursor: pointer;
      }
      .img{
        width: 100%;
        height: 100%;
      }
      .drag{
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}
.drawer_wrap{
  height: calc(100% - 60px);
  overflow: auto;
}
.drawer_bottom {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0px;
  padding-bottom: 20px;
  background-color: #fff;
  z-index: 1000;
  .separate {
    width: 100%;
    height: 1px;
    margin: 20px 0px;
    background-color: #dfe2e8;
  }
}
</style>
